<template>
  <div class="login">
    <!-- ============================  头部 =========================== -->
    <Header></Header> <!-- end navbar-inverse-blue -->

    <div class="grid_3">
      <div class="container">
        <div class="breadcrumb1">
          <ul>
            <a href="index.html"><i class="fa fa-home home_1"></i></a>
            <span class="divider"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">&nbsp;|&nbsp;</font></font></span>
            <li class="current-page"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">登录</font></font></li>
          </ul>
        </div>
        <div class="services">
          <div class="col-sm-6 login_left">
            <form>
              <div class="form-item form-type-textfield form-item-name">
                <label for="edit-name"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">用户名</font></font><span class="form-required" title="这是必填栏。"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">*</font></font></span></label>
                <input type="text" id="edit-name" name="name" value="" size="60" maxlength="60" class="form-text required" v-model="nickname">
              </div>
              <div class="form-item form-type-password form-item-pass">
                <label for="edit-pass"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">密码</font></font><span class="form-required" title="这是必填栏。"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">*</font></font></span></label>
                <input type="password" id="edit-pass" name="pass" size="60" maxlength="128" class="form-text required" v-model="password">
              </div>
              <div class="form-actions">
                <font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><input type="button" id="edit-submit" name="op" value="登录" class="btn_1 submit" @click="login"></font></font>
              </div>
            </form>
          </div>
          <div class="col-sm-6">
            <ul class="sharing">
              <li><a href="#" class="facebook" title="脸书"><i class="fa fa-boxed fa-fw fa-facebook"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 在脸书上分享</font></font></a></li>
              <li><a href="#" class="twitter" title="推特"><i class="fa fa-boxed fa-fw fa-twitter"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 鸣叫</font></font></a></li>
              <li><a href="#" class="google" title="谷歌"><i class="fa fa-boxed fa-fw fa-google-plus"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 在Google+上分享</font></font></a></li>
              <li><a href="#" class="linkedin" title="领英"><i class="fa fa-boxed fa-fw fa-linkedin"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 在领英上分享</font></font></a></li>
              <li><a href="#" class="mail" title="电子邮件"><i class="fa fa-boxed fa-fw fa-envelope-o"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 电子邮件</font></font></a></li>
            </ul>
          </div>
          <div class="clearfix"> </div>
        </div>
      </div>
    </div>

    <!-- ============================  尾部 =========================== -->
    <Footer></Footer>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: "login",
  data() {
    return {
      nickname:'',
      password:'',
    };
  },
  methods:{
    login(){
      if(this.nickname==''){
        alert('请输入用户名')
        return
      }
      if(this.password==''){
        alert('请输入密码')
        return
      }
      console.log('11111')
      let form = new FormData()
      form.append('nickname',this.nickname)
      form.append('password',this.password)
      axios({
        url:this.$api+'api/user/login/',
        method:'post',
        data:form,
        withCredentials: true,
      }).then((res)=>{
        alert(res.data.message)
        if(res.data.code==0){
          this.$router.push({path:'/index'})
        }
      })
    },
  }
};
</script>
